<template>
  <div>
    <div class="logredi" v-show="this.$store.state.userReg">
      <div class="users">
         <img src="./assets/img/register/叉号.png" alt="" class="cha" @click="showRegister">
        <div style="font-size: 20px; text-align: center">手机号注册</div>
        <div class="imp">
          <div>
          <div>
          <input class="phone" type="text" placeholder="手机号" v-model="cellPhone" @blur="checkPhone" /><img :src="require(`./assets/img/register/${sign1}.png`)" alt=""></div><p style="color:red" v-show="format1">手机号格式不对</p>
          <div>
          <input @blur="checkCode" type="text" placeholder="验证码" v-model="vercode"/><img :src="require(`./assets/img/register/${sign2}.png`)" alt=""><span class="tests" :style="`color:${col};fontWeight:${wgt[Math.random()*2]}`">{{code}}</span><canvas id="canvas" width="60" height="32"></canvas><span @click="updatecode" style="color: #36b447;">换一张</span></div><p style="color:red" v-show="format2">验证码错误</p>
          <div>
          <input type="text" placeholder="短信验证" v-model="sms" class="note" @blur="checknumber" /><img :src="require(`./assets/img/register/${sign3}.png`)" alt="" class="smimg"><button class="span" @click="getnum" :disabled="change">{{num}}{{text}}</button></div><p style="color:red" v-show="format3">验证码错误</p>
           <div>
          <input type="password" placeholder="密码（8-20个字符,数字加字母）"  class="phone" v-model="pwd" @blur="checkpwd" /><img :src="require(`./assets/img/register/${sign4}.png`)" alt="" class="smimg"></div><p style="color:red" v-show="format4">请重新输入密码(不能纯数字或者纯字母)</p>

          <input type="checkbox" id="one"/><span>阅读并同意</span> <a href="#">《360用户服务条款》</a
          ><span>和</span><a href="#">《360用户隐私政策》</a>

          <div  class="register-wide" @click="inup">注册</div>
          <div class="log"><span>已有账户，</span> <a href="#">直接登录</a> </div>
          </div>
        </div>
      </div>
    </div>
    <my-header />

    <router-view />
    <myfooter />
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import myfooter from "./components/MyFooter.vue";
import Test from './components/test.vue';
export default {
  components: { MyHeader, myfooter, Test },
  data() {
    return {
     cellPhone:'',
     vercode:'',
     sms:'',
     pwd:'',
     num:'',
     text:'获取验证码',
     sign:'对号_wps图片',
     sign1:'手机_wps图片',
     format1:false,
     sign2:'验证码_wps图片',
     format2:false,
     sign3:'短信_wps图片',
     format3:false,
     sign4:'登录页-密码_wps图片',
     format4:false,
     code:'4hhh',
     col:'red',
     change:false,
     x:5,
     y:5,
     wgt:'[300,600,900]'
    }
  },
  mounted () {
    this.updline()
  },
  methods: {
  // 验证码
  updatecode(){
	 var str = "",pos,zdycolor,sub,arr
	   arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
     zdycolor=['red','blue','indianred','indigo','black','pink','antiquewhite','olivedrab']
     sub = Math.round(Math.random() * (zdycolor.length-1))
     this.col=zdycolor[sub]
	 for(var i=0; i<4; i++){
	  pos = Math.round(Math.random() * (arr.length-1));
	  str += arr[pos];   
	 }
   this.updline()
	 return this.code=str;
	},
  // 随机线条
  updline(){
    let zdycolor=['red','blue','indianred','indigo','black','pink','antiquewhite','olivedrab']
   let sub1 = Math.round(Math.random() * (zdycolor.length-1))
   let sub2 = Math.round(Math.random() * (zdycolor.length-1))
   let sub3 = Math.round(Math.random() * (zdycolor.length-1))
     let cvs=document.getElementById('canvas')
        let ctx=cvs.getContext('2d')
        // 绘制路径
        ctx.clearRect(0, 0, 60, 32)
        let ts=[1,2,3,4]
       for(let k in ts ){ 
        let xx=Math.round(Math.random() *60);
        let yy=Math.round(Math.random() *32);
        this.x=xx
        this.y=yy
        let xx1=Math.round(Math.random() *60);
        let yy1=Math.round(Math.random() *32);
        this.x=xx
        this.y=yy
        ctx.beginPath()
        ctx.moveTo(this.x,this.y)
        ctx.lineTo(xx1,yy1)
        ctx.strokeStyle=zdycolor[sub1]
         ctx.stroke()}
  },
// 获取验证码
   getnum(){
      this.num=60
      this.text='秒后重试'
      this.change=true
   let timer=setInterval(() => {       
       this.num--
       if(this.num==0){
         clearInterval(timer)
          this.num=""
      this.text='获取验证码'
      this.change=false
         }
       
     }, 1000);
   },
// 检查部分
    checkPhone(){
      let reg=/^1[3-9]\d{9}$/
      if(this.cellPhone.trim()==''){
       return
      }else if(this.cellPhone.trim() && reg.test(this.cellPhone.trim())){
        this.format1=false
        this.sign1=this.sign
      }else {
        this.format1=true
      }     
    },
    checkCode(){
     if(this.vercode.trim()==''){
       return
      }else if(this.vercode==this.code){
         console.log(this.vercode);
              this.format2=false
            this.sign2=this.sign
       }else{
        this.format2=true
       }     
    },
   checknumber(){
     let reg=/^\d{4}$/
      if(this.sms.trim()==''){
       return
      }else if(this.sms.trim() && reg.test(this.sms.trim())){
        this.format3=false
        this.sign3=this.sign
      }else {
        this.format3=true
      }     
   },
   checkpwd(){
     let reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
      if(this.pwd.trim()==''){
       return
      }else if(this.pwd.trim() && reg.test(this.pwd.trim())){
        this.format4=false
        this.sign4=this.sign
      }else {
        this.format4=true
      }     
   },
  // 更新显示
    showRegister() {
      // this.checkPhone()=this.getnum()=this.checkCode()=this.checknumber()=this.checkpwd()=null
      this.format1=this.format2=this.format3=this.format4=false
      this.cellPhone=this.vercode=this.sms=this.pwd=this.num=''
      document.getElementById('one').checked=false
      this.$store.commit('updateShow',false)
      this.format1=false
    },
     // 注册
  inup(){
    let one=document.getElementById('one')
    console.log(one);
    console.log(one.checked);
    if(!one.checked){alert('请阅读并勾选服务条款')}
  }
  },
 
};
</script>

<style lang="scss" scoped>
@import url("./assets/css/myfooter.css");
@import url("./assets/css/top-bar.css");
@import url("./assets/css/reset.css");

.logredi {
  width: 100vw;
  height: 100rem;
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  // padding-top: 10em;
  .users {
    color: #36b447;
    width: 450px;
    padding: 10px 0 74px;
    background-color: #fff;
    z-index: 40;
    margin:auto;
    padding-top: 40px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.16);
    opacity: 1;
    position: fixed;
    top: 18vh;
    left: 32vw;
    .cha{
      width: 22px;
      height: 22px;
      position: absolute;
      left: 420px;
      top: 7px;
    }
    div{ 
      width: 330px;   
        margin: auto;    
      position: relative;
      canvas{
        position: absolute;
        top: 21px;
        left: 224px;
      }
      span.tests{
        display: inline-block;
        width: 67px;
        padding: 7px 15px 9px 15px;
        border: 1px solid #ddd;
        box-sizing: border-box;
      }
      a{
        color: #36b447;
      }
      .log{
        text-align: right;
      }
      span:not(span.span){
       color: #6f6f6f;
    
      }
      button.span{
        // color: #36b447;
        display: inline-block;
         border: 1px solid #ddd;
         padding: 8px 21px 10px 21px;
         background-color: #fafafa;
      }
      .phone{
        width: 330px;
        box-sizing: border-box;
      }
     .register-wide{
       width: 330px;
       background-color: #36b447;
       line-height: 42px;
           color: #fff;
           font-size: 18px;
           text-align: center       
     }
    img{
      width: 16px;
      height: 16px;
      position: absolute;
      left: 15px;
      top: 30px;
    }
    input.note{
     width: 165px;
    }
    input:not(.check) {
      display: inline-block;
      padding: 10px 10px 10px 40px;
      border: 1px solid #ddd;
      border-radius: 2px;
      outline: none;
      margin-top: 20px;
    }

    .test-code {
      width: 156px;
      height: 42px;
    }
     }
  }
}
</style>
